<template>
  <div class="strength-seller clearfix">
    <header class="header pull-left text-center">
      <h2 class="title">实力商家</h2>
      <p class="desc">精品店铺&emsp;专业定制&emsp;资源专享</p>
      <a target="_blank" :href="`${address.CENTER_ADDRESS}/shop/fastOpenShop?platformCode=${website.platformCode}&backUrl=${address.CENTER_ADDRESS}/shop/fastOpenShop`"
         class="join">申请入驻</a>
    </header>

    <div class="seller-wrap">
      <el-carousel :autoplay="false"
                   height="240px"
                   :arrow="data.length > 1 ? '' : 'never'"
                   indicator-position="none">
        <el-carousel-item v-for="(item, index) in data" :key="index">
          <ul class="seller-list">
            <li v-for="(item1, index1) in item" :key="index1">
              <a :href="item1.path" target="_blank">
                <img v-lazyload.cdn="item1.picturePath" :alt="item1.name">
                <div class="mark text-overflow">
                  <span class="text-overflow" :title="item1.name">{{item1.name}}</span>
                </div>
              </a>
            </li>
          </ul>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
  import address from '~/config'
  import website from '~/config/website'

  export default {
    props: {
      data: {
        type: Array,
        'default' () {
          return []
        }
      }
    },
    data () {
      return {
        website: website,
        address: address
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../element-variables";

  .strength-seller {
    height: 240px;
    margin-top: 30px;

    .header {
      background-color: $--color-primary-light-1;
      height: 100%;
      width: 230px;
      padding-top: 50px;
      color: #fff;
      position: relative;

      &:after {
        content: '';
        width: 0;
        height: 0;
        border-width: 8px 10px;
        border-color: $--color-primary-light-1 transparent transparent $--color-primary-light-1;
        border-style: solid;
        position: absolute;
        right: -20px;
        top: 0;
        z-index: 8;
      }
    }

    .title {
      font-size: 36px;
      font-weight: normal;
      line-height: 36px;
    }

    .desc {
      padding-top: 20px;
      padding-bottom: 30px;
    }

    .join {
      width: 130px;
      line-height: 33px;
      background-color: #fff;
      color: $--color-primary;
      border: 1px solid #fff;
      display: inline-block;
      font-size: 16px;
      border-radius: 5px;

      &:hover {
        background-color: $--color-primary;
        border-color: $--color-primary;
        color: #fff;
      }
    }

    .seller-wrap {
      height: 100%;
      overflow: hidden;
      li {
        float: left;
        position: relative;
        overflow: hidden;
        &:nth-child(4n) a {
          border-right: none;
        }

        &:hover {
          .mark {
            bottom: 0;
            display: block;
          }
        }
      }

      .mark {
        width: 100%;
        height: 100%;
        display: none;
        color: #fff;
        left: 0;
        font-size: 18px;
        background-color: rgba(0, 0, 0, .5);
        position: absolute;
        padding: 0 8px;

        span {
          width: 100%;
          text-align: center;
          padding: 0 8px;
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }

      a {
        height: 121px;
        width: 240px;
        border-right: 1px solid #dedede;
        border-bottom: 1px solid #dedede;
        display: block;
        overflow: hidden;

        img {
          height: 120px;
        }
      }
    }
  }
</style>
